<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的资源</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
    <link rel="stylesheet" href="../../admin/css/other/department.css"/>
</head>
<style>
    .t-click {
        user-select: none;
        font-weight: 500;
    }

    /* zdy主题风格*/
    .dtree-zdy-item-this {
        background-color: rgba(232, 230, 230, 0.86) !important;
    }

    /* 当前选中行样式*/
    .dtree-zdy-item:hover {
        background-color: rgba(242, 242, 242, 0.84) !important;
    }

    /* 行悬停样式*/
    .dtree-zdy-item cite {
        font-size: 14px !important;
    }

    /* 行文字样式*/
    .dtree-zdy-item:hover cite {
        color: #096a3b !important
    }

    /* 行悬停文字样式*/
    .dtree-zdy-dtreefont {
        font-size: 30px !important;
    }

    /* 一级图标、二级图标、复选框样式*/
    .dtree-zdy-ficon {
        color: #2F4056 !important;
    }

    /*一级图标特定样式*/
    .dtree-zdy-icon {
        color: #2F4056 !important;
    }

    /*二级图标特定样式*/
    .dtree-zdy-checkbox:hover {
        color: #11824b !important;
    }

    /*复选框悬停样式*/
    .dtree-zdy-choose {
        color: #11824b !important;
    }

    /* 复选框选中样式*/
    .dtree-icon-xiangyou {
        font-size: 18px !important;
    }

    .dtree-icon-xiangxia1 {
        font-size: 18px !important;
    }

    .dtree-zdy-checkbox {
        font-size: 18px !important;
    }

    .dtree-zdy-item {
        line-height: 50px;
    }


</style>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form id="queryForm" class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label" style="width: 100px">我的资源查询</label>
                    <div class="layui-input-inline">
                        <input type="text" name="fileName" placeholder="请输入你的资源名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="layui-btn layui-btn-sm" lay-submit lay-filter="resource-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>我上传的资源列表</legend>
                </fieldset>

                <div class="layui-card-body">
                    <button id="files_upload" class="layui-btn  layui-btn-sm"
                            lay-submit lay-filter="files_load">
                        <i class="layui-icon layui-icon-add-1"></i>
                        上传资源
                    </button>
                    <button id="files_refresh" class="layui-btn  layui-btn-sm"
                            lay-submit lay-filter="files_load">
                        <i class="layui-icon layui-icon-refresh"></i>
                        刷新资源
                    </button>
                    <button id="files_load" class="layui-btn layui-btn-normal layui-btn-sm"
                            lay-submit lay-filter="files_load">
                        <i class="layui-icon layui-icon-download-circle"></i>
                        批量下载
                    </button>
                    <table id="myResourceTb" lay-filter="demoTreeTb"></table>
                </div>

            </div>
        </div>
    </div>
</div>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script type="text/html" id="power-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
    </button>
</script>


<script type="text/html" id="power-enable">
    <input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable"
           checked="{{ d.id == 10003 ? 'true' : 'false' }}">
</script>

<script type="text/html" id="icon">
    <i class="layui-icon {{d.icon}}"></i>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
    <a class="layui-btn layui-btn-sm" lay-event="download">
        <i class="layui-icon layui-icon-download-circle"></i>
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>
    </a>
</script>
<script>
    layui.config({
        base: '../../component/layui/'  // 配置模块所在的目录
    }).use(['treeTable'], function () {

    });

    layui.use(['form', 'jquery', 'treeTable'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let treeTable = layui.treeTable;
        let level = '';
        let courseName = '';
        let authorityId = '';
        let MODULE_PATH = "operate/";


        $('#files_refresh').click(function () {
            insTb.reload({
                reqData: function (data, callback) {
                    //console.log('req');
                    //console.log(data);
                    level = data ? data.level : '';
                    courseName = data ? data.fileName : '';
                    authorityId = data ? data.authorityId : '';
                    //console.log(level);
                    $.get('/Resource/getInfoByTeacherId?level=' + level + '&course=' + courseName +
                        '&authorityId=' + authorityId,
                        function (res) {
                            console.log(res);
                            callback(res.data);
                            insTb.expandAll();  // 展开全部
                            insTb.foldAll();  // 折叠全部
                        });
                }
            });
        })

        $('#files_upload').click(function (){
            layer.open({
                type: 2,
                title: '上传资源',
                shade: 0.1,
                shadeClose:true,
                area:['70%', '80%'],
                content: MODULE_PATH + 'uploadResources.html'
            });
        })

        // 渲染树形表格
        let insTb = treeTable.render({
            elem: '#myResourceTb',
            reqData: function (data, callback) {
                //console.log('req');
                //console.log(data);
                level = data ? data.level : '';
                courseName = data ? data.fileName : '';
                authorityId = data ? data.authorityId : '';
                //console.log(level);
                $.get('/Resource/getInfoByTeacherId?level=' + level + '&course=' + courseName +
                    '&authorityId=' + authorityId,
                    function (res) {
                        console.log(res);
                        callback(res.data);
                        insTb.expandAll();  // 展开全部
                        insTb.foldAll();  // 折叠全部

                    });
            },
            tree: {
                iconIndex: 2,           // 折叠图标显示在第几列
                isPidData: true,        // 是否是id、pid形式数据
                idName: 'authorityId',  // id字段名称
                pidName: 'parentId'     // pid字段名称
                , openName: 'open'
                , arrowType: 'arrow2',   // 自定义箭头风格
                getIcon: function (d) {  // 自定义图标
                    //console.log(d);
                    // d是当前行的数据
                    if (d.haveChild) {  // 判断是否有子集
                        return '<i class="ew-tree-icon ew-tree-icon-folder"></i>';
                    } else {
                        return '<i class="ew-tree-icon ew-tree-icon-file"></i>';
                    }
                }
            },
            cols: [[
                {field: 'number', title: '占位列', hide: true},
                {type: 'checkbox'},
                {field: 'fileName', title: '资源名称'},
                {field: 'fileSize', title: '文件大小'},
                {field: 'createTime', title: '上传时间'},
                {
                    field: 'op', title: '操作', align: 'right',
                    templet: function (obj) {
                        //console.log(obj);
                        if (obj.haveChild) {
                            return '<a class="layui-btn layui-btn-danger layui-btn-sm" ' +
                                'lay-event="del">\n' +
                                '        <i class="layui-icon layui-icon-delete"></i>\n' +
                                '    </a>'
                        } else {
                            return '<a class="layui-btn  layui-btn-sm" lay-event="download">\n' +
                                '        <i class="layui-icon layui-icon-download-circle"></i>' +
                                '</a>' +
                                '<a class="layui-btn layui-btn-danger layui-btn-sm" ' +
                                'lay-event="del">\n' +
                                '        <i class="layui-icon layui-icon-delete"></i>\n' +
                                '    </a>'
                        }

                    }
                    , width: 150
                },
                {field: 'fileId', title: '文件ID', hide: true}
            ]],
            text: {
                none: '<div">哎呀，一条数据都没有~</div>'
            }
        });

        // 工具列点击事件
        treeTable.on('tool(myResourceTb)', function (obj) {
            let event = obj.event;
            if (event === 'del') {
                console.log(obj.data);
                //obj.tr.children().eq(5).html('<span class="layui-badge layui-bg-green">已关注</span>')
                window.del(obj);
                //obj.del();
            } else if (event === 'download') {
                //obj.tr.children().eq(5).attr('href','/Resource/downloadResource?')
                window.download(obj);
                //obj.update({authorityName: '新的名称'});
            }
        });

        //批量下载
        window.allDownload = function (obj) {
            if (obj.length === 1) {
                insTb.expand(obj[0].authorityId);
                //insTb.setChecked([2]);
                //let data = insTb.checkStatus(false);
                //console.log(obj[0].authorityId);
                return false;
            }
            layer.open({
                title: '批量下载提示',
                content: '<i class="layui-icon layui-icon-download-circle" style="font-size: 35px">' +
                    '&nbsp;' +
                    '</i>是否开始批量下载选中文件'
                , btn: ['确认', '取消']
                , yes: function (index, layero) {
                    let fileIds = new Array()
                    for (let i = 0; i < obj.length; i++) {
                        if (!obj[i].haveChild) {
                            fileIds.push(obj[i].fileId);
                        }
                    }
                    console.log(fileIds);
                    if (fileIds.length === 0) {
                        layer.msg('第一次加载请先展开文件夹获取资源目录后再下载');
                        return false;
                    }
                    layer.msg('开始批量下载文件');
                    let fileForm = $("<form action='/Resource/downloadResByFileId' method='post'></form>")
                    fileForm.append("<input type='hidden' name='fileIds' value='" + JSON.stringify(fileIds) + "'/>")
                    $(document.body).append(fileForm);
                    fileForm.submit();
                    fileForm.remove();
                }
                , btn2: function (index, layero) {
                    //return false 开启该代码可禁止点击该按钮关闭
                }
                , cancel: function () {
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });

        }
        //批量下载按钮点击事件
        $('#files_load').click(function () {
            let obj = insTb.checkStatus(false);
            console.log(obj);
            if (!obj) {
                layer.open({
                    title: '提示'
                    , icon: 0
                    , content: '请先选择您要下载的文件'
                });
                return false;
            }
            window.allDownload(obj);
        })

        //单个下载
        window.download = function (obj) {
            console.log(obj);
            layer.open({
                title: '下载提示',
                content: '是否开始下载：' + obj.data.fileName
                , btn: ['确认', '取消']
                , yes: function (index, layero) {
                    //按钮【按钮一】的回调
                    let fileIds = new Array()
                    fileIds[0] = obj.data.fileId
                    layer.msg('开始下载：' + obj.data.fileName);
                    let fileForm = $("<form action='/Resource/downloadResByFileId' method='post'></form>")
                    fileForm.append("<input type='hidden' name='fileIds' value='" + JSON.stringify(fileIds) + "'/>")
                    $(document.body).append(fileForm);
                    try {
                        fileForm.submit();
                        fileForm.remove();
                    } catch (e) {
                        console.log(e);
                        fileForm.remove();
                    }
                }
                , btn2: function (index, layero) {
                    //return false 开启该代码可禁止点击该按钮关闭
                }
                , cancel: function () {
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        }

        //单个删除
        window.del = function (obj) {
            let content = '';
            if (obj.data.haveChild) {
                content = '是否删除学科文件夹：《' + obj.data.fileName + '》'
            } else {
                content = '是否删除文件：' + obj.data.fileName
            }
            layer.open({
                title: '提示',
                content: content
                , btn: ['确认', '取消']
                , yes: function (index, layero) {
                    let delUrl = '';
                    //判断是否为文件夹
                    if (obj.data.haveChild) {
                        delUrl = '/Resource/deleteByCourseName';
                    } else {
                        delUrl = '/Resource/deleteResource';
                    }
                    $.ajax({
                        url: delUrl,
                        type: 'post',
                        data: {
                            course: obj.data.fileName,
                            fileId: obj.data.fileId
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (res.success) {
                                layer.msg('删除成功', {icon: 1});
                                obj.del();
                            } else {
                                layer.open({
                                    title: '提示'
                                    , icon: 5
                                    , content: '删除失败，请重新尝试'
                                });
                            }
                        },
                        error: function (res) {
                            layer.open({
                                title: '异常提示'
                                , icon: 2
                                , content: '服务器处理异常，请稍后尝试'
                            });
                        }
                    })
                }
            })


        }

        form.on('submit(resource-query)', function (obj) {
            console.log(obj.field);
            insTb.reload({
                reqData: function (data, callback) {
                    //console.log(level);
                    $.get('/Resource/selectByFileName?fileName=' + obj.field.fileName,
                        function (res) {
                            console.log(res);
                            callback(res.data);
                        });
                },
            })


            return false;
        })


    })
</script>
</body>
</html>
